<!--
// 
// Index.vue
// 客户后台
// 
// 2024/10/18.
// 
-->
<template>
    <div class="Version">
        <div class="version-list">
            <!-- 功能按钮 -->
<!--            <div class="table-buttons">-->
<!--                <el-button v-permission="permission.add" type="primary" @click="addData">-->
<!--                    <b-icon name="bi-plus" size="20" />-->
<!--                    添加版本-->
<!--                </el-button>-->
<!--            </div>-->
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="versionSelect">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column align="center" type="radio" width="50"></vxe-column>
                <vxe-column field="versionNum" title="版本号" width="120">
                    <template #default="{row}">
                        <span style="color: var(--el-color-primary);font-size: 16px">V{{ row.versionNum }}</span>
                    </template>
                </vxe-column>
                <vxe-column align="center" field="versionBitness" title="编译版本" width="100">
                    <template #default="{row}">
                        <span v-if="row.versionBitness === 32">32位</span>
                        <span v-if="row.versionBitness === 64">64位</span>
                        <span v-if="row.versionBitness === 96">32位 | 64位</span>
                    </template>
                </vxe-column>
                <vxe-column :resizable="false" field="action" title="操作" :width="$widthColumn(100)">
                    <template #default="{row}">
                        <table-action :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                        ]" :data="row" />
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="page-config">
                <el-button :disabled="requestParams.pageIndex <= 1" link type="primary" @click="prevPage">上一页</el-button>
                <el-button :disabled="requestParams.pageIndex >= pageConfig.totalPages" link type="primary" @click="nextPage">下一页</el-button>
            </div>
            <EditForm ref="editForm" />
        </div>
        <div class="file-list">
            <FileList ref="fileList" />
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, inject} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"
import EditForm from "./EditForm.vue"
import FileList from "./Files/Index.vue"

const {$widthColumn} = window

const detailsInfo = inject("detailsInfo")
const props = defineProps({});
const emits = defineEmits(["change"]);


// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 260)

// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: []
})

// 当前页面功能权限
const permission = {
    add: "Version:AddVersionInfo",
    delete: "Version:DeleteVersionInfo",
    edit: "Version:UpdateVersionInfo",
};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: true,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    name: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    // name: {label: "名称", component: "el-input"},
    // code: {label: "编号", component: "el-input"},
    //sort: {label: "排序", component: "el-select", data: [{name: "1", value: 1}, {name: "2", value: 2}], inMore: true},
    //createdTime: {label: "创建时间", component: "el-date-picker", format: "YYYY-MM-DD", inMore: true},
    //updateTime: {label: "更新时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", inMore: true}
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

// 选中版本
const fileList = ref()

function versionSelect({row}) {
    // console.log(e)
    console.log(row)
    fileList.value.reload(row)
    emits("change", row)
}


const editForm = ref();

// 添加
function addData() {
    editForm.value.show({
        title: "添加",
        options: {
            programId: detailsInfo.value.id,
        },
        ok: () => {
            reload(true);
        }
    })
}

// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteVersionInfo({id});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}

// 详情
function toDetails(row) {
    router.push(`/?page=/ProjectManage/Program/Details&id=${row.id}&titleName=${row.name}&only=1`);
}

// 修改
function editData(row) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok: () => {
            reload();
        }
    })
}

// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
const VXETable = ref();

async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody,
        programId: detailsInfo.value.id,
    };
    state.isLoading = true;
    const {success, data} = await api.GetVersionPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount, totalPages} = data;
    state.list = items;
    pageConfig.total = totalCount;
    pageConfig.totalPages = totalPages;
    setTimeout(() => {
        VXETable.value.setRadioRow(items[0] || {})
        VXETable.value.setCurrentRow(items[0] || {})
        versionSelect({row: items[0]})
    }, 300)
}

function prevPage() {
    requestParams.pageIndex -= 1
    loadList()
}

function nextPage() {
    requestParams.pageIndex += 1
    loadList()
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}

onMounted(() => {
    reload()
})
</script>

<style lang="scss" scoped>
.Version {
    width: 100%;
    height: calc(100vh - 310px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    .version-list {
        width: 400px;

        .page-config {
            justify-content: center;
        }
    }

    .file-list {
        width: calc(100% - 370px);
        height: 100%;
    }
}
</style>